<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<style>
/*
html5 form validation insired by http://www.bradshawenterprises.com/blog/2010/fancy-forms-html5-css3-js/ 
and http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element
and http://www.alistapart.com/articles/forward-thinking-form-validation/
and http://www.alistapart.com/d/forward-thinking-form-validation/enhanced_2.html
*/
input,textarea {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #fff;
	border: 1px solid #ccc;
	font-size: 20px;
	width: 300px;
	min-height: 30px;
	display: block;
	margin-bottom: 16px;
	margin-top: 8px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

textarea {
	min-height: 200px;
}

input:focus,textarea:focus {
	-webkit-box-shadow: 0 0 25px #ccc;
	-moz-box-shadow: 0 0 25px #ccc;
	box-shadow: 0 0 25px #ccc;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transform: scale(1.05);
}

/* The interesting bit */
input:not (:focus ),textarea:not (:focus ) {
	opacity: 0.5;
}

input:required,textarea:required {
	background: url("images/asterisk_orange.png") no-repeat 280px 7px;
}

input:valid,textarea:valid {
	background: url("/images/tick.png") no-repeat 280px 5px;
}

input:focus:invalid,textarea:focus:invalid {
	background: url("/images/cancel.png") no-repeat 280px 7px;
}

input[type=submit] {
	padding: 10px;
	background: none;
	opacity: 1.0;
}
</style>
<title>Register/Login</title>
</head>

<!-- This is a embedable piece of html so we will surround it with a blank template -->
<body class="lift:content_id=emb_reglogin">
	<div id="emb_reglogin" >

		<div data-lift='test_cond.loggedout'>
            <!-- we are doing some instant user interactive validation but have turned of validation on submit -->
			<form id='login-form'
				data-lift='RegisterLogin.registerOrLogin?form=post' novalidate>
				<table class='register_ft'>
					<tr>
						<td>Email:<br /> <input
							id='input_email' name='email' type='email' title="Please enter a valid email" required
							placeholder='email@example.com' /></td>
						<td>Password:<br /> <input id='input_pw' name='pw'
							type='password' required
							title="Minimum 6 alphanumeric characters" pattern="\w{6,}"
							placeholder="password" /></td>
						<td>Confirm Password (on registration only):<br /> <input
							id='input_conf_pw' name='conf_pw' type='password' /></td>
					</tr>
					<tr>
						<td colspan='3'><input id='login_button'
							value='Register/Login' name='register' type='submit' /> <span
							data-lift="Msg?id=email;errorClass=register_error"></span> <span
							data-lift="Msg?id=pw;errorClass=register_error"></span></td>
					</tr>
				</table>
			</form>
		</div>

		<div data-lift='test_cond.loggedin'>
			<div data-lift='RegisterLogin.greetings'>
				Welcome <span id="user_greeter"> some greetings here</span>
			</div>
			<form data-lift='RegisterLogin.logout?form=post'>
				<input id='logout_button' value='Logout' name='logout' type='submit' />
			</form>
		</div>
	</div>
</body>
</html>

